<template>
  <div id="seats">
    <header>
      <a v-on:click="goback()">
        <i class="iconfont icon-jiantou-copy"></i>
      </a>
      <p>{{cinemaInfo.nm}}</p>
    </header>
    <div class="seatsCentent">
      <div class="buy_step">
        <ul>
          <li class="actived">1.选择场次</li>
          <li class="actived">2.在线选座</li>
          <li>3.支付</li>
          <li>4.取票</li>
        </ul>
      </div>
      <div class="movie_title">
        <div>
          <strong>{{movieInfo.nm}}</strong>
          <p>{{dateIndexInfo.dt}} {{dateIndexInfo.tm}}</p>
        </div>
        <router-link class="buy" to="">提交订单</router-link>
      </div>
      <div class="movie_tip">
        <ul v-if="selectedSeats.length == 0">
          <li>
            <span class="seat active"></span>可选
          </li>
          <li>
            <span class="seat selected"></span>已选
          </li>
          <li>
            <span class="seat disable"></span>已售
          </li>
          <li>
            <span class="seat love"></span>情侣座
          </li>
        </ul>
        <ul class="selectedSeat" v-else>
          <li v-for="selectedSeat in selectedSeats">
            <span>{{showSelected(selectedSeat)}}</span>
          </li>
          <li class="money">
            33元
          </li>
        </ul>
      </div>
      <div class="main">
        <span>{{dateIndexInfo.th}}</span>
        <div class="main_container">
          <div class="scroller">
            <ul v-for="section in sections">
              <li v-for="(seatRow, index) in section.seatRows">
                <p>{{index + 1}}</p>
              </li>
              </li>
            </ul>
          </div>
          <div class="main_seats">
            <div class="screen_tip">
              屏幕中央
            </div>
            <ul v-for="section in sections">
              <li v-for="seatRow in section.seatRows">
                <ul>
                  <li v-for="seat in seatRow.seats">
                    <a href="javascript:" class="seat" :class="switchType(seat.type)" :name="seat.rowNum + ',' + (seat.columnNum + 1)" v-on:click="selectSeat($event)"></a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import $ from 'jquery'
import filmer from '../filmer'
import Vue from 'vue'
export default {
  data() {
    return {
      dateIndex: this.$route.params.dateIndex,
      date: this.$route.params.date,
      cinemaInfo: '',
      movieInfo: '',
      dateInfo: '',
      dateIndexInfo: '',
      sections: '',
      selectedSeats: []
    }
  },
  methods: {
    init: function() {
      var that = this;
      var data = cinemas();
      // filmer.getCinemaInfo(this.cinemaId, this.movieId, function (data) {
      console.log(data)
      if (data.status == 0) {
        that.movieInfo = data.data.currentMovie;
        that.cinemaInfo = data.data.cinemaDetailModel;
        that.dateInfo = data.data.DateShow[that.date];//日期
        that.dateIndexInfo = that.dateInfo[that.dateIndex];//索引
        console.log(that.dateIndexInfo)

        that.getSeats(that.dateIndexInfo.showId, that.date);
      }
      // })

    },
    //获取座位
    getSeats: function(showId, showDate) {
      var that = this;
      var data = place();
      console.log(data)
      if (!data.errMsg) {
        this.sections = data.sections;
        // var w = 0;
        // for (var i = 0; i < that.sections.length; i++) {
        //   w += that.sections[i].columns * 2.7
        // }
        // Vue.nextTick(function() {
        //   $(".main_seats>ul").css("width", w + "rem");
        // })
      } else {
        alert(data.errMsg.errMsg);
        that.goback();
      }
    },
    goback: function() {
      //返回上一级，go方法用于控制history记录的前进和后退
      this.$router.go(-1)
    },
    switchType: function(value) {
      var result;
      switch (value) {
        case 'N': result = "active"; break;
        case 'LK': result = "disable"; break;
        case 'L':
        case 'R': result = "love"; break;
        case 'E': result = 'none'; break;
      }
      return result;
    },
    //选择座位
    selectSeat: function(e) {
      var seat = $(e.target);
      var that = this;
      if (!seat.hasClass("disable") && !seat.hasClass("none")) {
        if (seat.hasClass("selected")) {
          seat.removeClass("selected");
          for (var item in this.selectedSeats) {
            if (this.selectedSeats[item] == seat.attr("name")) {
              this.selectedSeats.splice(item, 1);
              break;
            }
          }
          console.log(this.selectedSeats);
        } else {
          if (this.selectedSeats.length < 4) {
            seat.addClass("selected");
            this.selectedSeats.push(seat.attr("name"));
          } else {
            alert("一次最多只能选择4个座位！");
          }
        }
      }
    },
    showSelected: function(value) {
      return value.replace(",", "排") + "座";
    }
  },
  created: function() {
    this.init();
  }
}
function cinemas() {
  var data = '{"control":{"expires":120},"status":0,"data":{"Dates":[{"text":"今天 8月15日","slug":"2017-08-15"},{"text":"明天 8月16日","slug":"2017-08-16"}],"currentMovie":{"ver":"2D/3D/IMAX 2D/中国巨幕/全景声","nm":"战狼2","isShowing":true,"img":"http://p0.meituan.net/165.220/movie/02ac72c0e8ee2987f7662ad921a2acc7999433.jpg","sc":9.7,"preferential":0,"id":344264},"cinemaDetailModel":{"deals":"","area":"雁塔区","bus":"","park":"","imax":0,"snum":42,"s":8.285714,"s1":8.285714,"s2":8.476191,"s3":8.238095,"featureTags":[{"desc":"一号激光厅，152个座位；二号激光厅，152个座位；三号激光厅，152个座位；四号厅，195个座位；五号激光厅，113个座位；六号激光厅，116个座位；七号激光厅，113个座位","type":19,"tag":"60帧厅"},{"desc":"二号激光厅，447个座位；巨幕厅","type":15,"tag":"杜比全景声厅"},{"desc":"1.3米以下儿童可免费观看电影（无座），每位成人仅限携带1名免票儿童。","type":7,"tag":"儿童优惠"}],"ct":"西安","nm":"奥斯卡金地国际影城(金地广场)","lat":34.20359,"lng":108.98846,"addr":"雁塔区曲江池东路金地广场4楼（飞象披萨对面）","price":0.0,"callboard":"","brd":"其它","dis":"","tel":["029-84561999","400-899-9527"],"suw":"","dri":"","note":"","dealtp":0,"preferential":0,"sellmin":0,"sell":true,"id":11533},"movies":[{"ver":"2D/3D/IMAX 2D/中国巨幕/全景声","nm":"战狼2","isShowing":true,"img":"http://p0.meituan.net/165.220/movie/02ac72c0e8ee2987f7662ad921a2acc7999433.jpg","sc":9.7,"preferential":0,"id":344264},{"ver":"2D","nm":"心理罪","isShowing":true,"img":"http://p1.meituan.net/165.220/movie/5861989b806570f3d7a82ee5695ddf1a512543.jpg","sc":8.2,"preferential":0,"id":342381},{"ver":"2D/IMAX 2D/中国巨幕","nm":"侠盗联盟","isShowing":true,"img":"http://p1.meituan.net/165.220/movie/26ca66778a40ef2bbcfd33877017a84e1033521.jpg","sc":8.1,"preferential":0,"id":1183619},{"ver":"2D","nm":"二十二","isShowing":true,"img":"http://p0.meituan.net/165.220/movie/3a4f9d6e3c48326d4ae4fe3ed8c973e1584222.jpg","sc":9.5,"preferential":0,"id":615739},{"ver":"3D/IMAX 3D/中国巨幕","nm":"神偷奶爸3","isShowing":true,"img":"http://p0.meituan.net/165.220/movie/e4aa7abb6ef5fbe695174063ac6cc0921246361.jpg","sc":8.8,"preferential":0,"id":249900},{"ver":"2D","nm":"地球：神奇的一天","isShowing":true,"img":"http://p1.meituan.net/165.220/movie/5568cc4d4fb01053ca856f8bf50720021284663.jpg","sc":9.1,"preferential":0,"id":344081},{"ver":"3D/IMAX 3D/中国巨幕/全景声","nm":"三生三世十里桃花","isShowing":true,"img":"http://p0.meituan.net/165.220/movie/e5a715b3fcbd9e928dc96aefa6b19d58379838.jpg","sc":7.1,"preferential":0,"id":246896},{"ver":"3D/IMAX 3D/中国巨幕/全景声","nm":"星际特工：千星之城","isShowing":false,"img":"http://p0.meituan.net/165.220/movie/41ebecd825ffe37afd93687d480de1f1639738.png","sc":0.0,"preferential":0,"id":249008},{"ver":"2D","nm":"杀破狼·贪狼","isShowing":false,"img":"http://p0.meituan.net/165.220/movie/5097ccd2d26924642161e3b101943c31304962.jpg","sc":0.0,"preferential":0,"id":342176},{"ver":"2D/3D/IMAX 2D/中国巨幕","nm":"赛车总动员3：极速挑战","isShowing":false,"img":"http://p0.meituan.net/165.220/movie/2b73d01ae68a1972f7f3e235127c8bb9723265.jpg","sc":0.0,"preferential":0,"id":342067},{"ver":"2D/3D/IMAX 3D/中国巨幕","nm":"鲛珠传","isShowing":true,"img":"http://p0.meituan.net/165.220/movie/a229a1429ea8209e19c2cc24d0cc8c4a994102.png","sc":7.8,"preferential":0,"id":245938}],"DateShow":{"2017-08-15":[{"end":"19:53","showId":172227,"tp":"3D","lang":"国语","dt":"2017-08-15","embed":0,"showDate":"2017-08-15","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"六号激光厅","sellPrStr":"78393","prStr":"31905","preferential":0,"tm":"17:50","sell":true},{"end":"20:43","showId":172228,"tp":"3D","lang":"国语","dt":"2017-08-15","embed":0,"showDate":"2017-08-15","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"29399","prStr":"98907","preferential":0,"tm":"18:40","sell":true},{"end":"21:23","showId":172229,"tp":"3D","lang":"国语","dt":"2017-08-15","embed":0,"showDate":"2017-08-15","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"02497.951","prStr":"614415020770","preferential":0,"tm":"19:20","sell":true},{"end":"22:13","showId":172230,"tp":"3D","lang":"国语","dt":"2017-08-15","embed":0,"showDate":"2017-08-15","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"六号激光厅","sellPrStr":"79399","prStr":"64908","preferential":0,"tm":"20:10","sell":true},{"end":"23:03","showId":172231,"tp":"3D","lang":"国语","dt":"2017-08-15","embed":0,"showDate":"2017-08-15","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"42396","prStr":"60900","preferential":0,"tm":"21:00","sell":true},{"end":"23:53","showId":172232,"tp":"3D","lang":"国语","dt":"2017-08-15","embed":0,"showDate":"2017-08-15","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"66497.928","prStr":"867315923070","preferential":0,"tm":"21:50","sell":true},{"end":"00:43","showId":172233,"tp":"3D","lang":"国语","dt":"2017-08-15","embed":0,"showDate":"2017-08-15","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"六号激光厅","sellPrStr":"72356","prStr":"65906","preferential":0,"tm":"22:40","sell":true}],"2017-08-16":[{"end":"12:33","showId":229375,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"四号厅","sellPrStr":"83354","prStr":"94903","preferential":0,"tm":"10:30","sell":true},{"end":"13:23","showId":229376,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"五号激光厅","sellPrStr":"70351","prStr":"87905","preferential":0,"tm":"11:20","sell":true},{"end":"14:13","showId":229377,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"一号激光厅","sellPrStr":"20353","prStr":"09908","preferential":0,"tm":"12:10","sell":true},{"end":"14:53","showId":229378,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"四号厅","sellPrStr":"32355","prStr":"02903","preferential":0,"tm":"12:50","sell":true},{"end":"15:33","showId":229379,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"08359","prStr":"58904","preferential":0,"tm":"13:30","sell":true},{"end":"16:13","showId":229380,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"三号激光厅","sellPrStr":"51395","prStr":"15905","preferential":0,"tm":"14:10","sell":true},{"end":"17:03","showId":229381,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"71494.975","prStr":"135115389370","preferential":0,"tm":"15:00","sell":true},{"end":"17:53","showId":229382,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"79398","prStr":"01906","preferential":0,"tm":"15:50","sell":true},{"end":"18:33","showId":229383,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"三号激光厅","sellPrStr":"96398","prStr":"78901","preferential":0,"tm":"16:30","sell":true},{"end":"19:23","showId":229384,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"42492.937","prStr":"169915943830","preferential":0,"tm":"17:20","sell":true},{"end":"20:13","showId":229385,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"41394","prStr":"70902","preferential":0,"tm":"18:10","sell":true},{"end":"21:03","showId":229386,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"三号激光厅","sellPrStr":"21397","prStr":"23906","preferential":0,"tm":"19:00","sell":true},{"end":"21:43","showId":229387,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"37493.956","prStr":"054215041220","preferential":0,"tm":"19:40","sell":true},{"end":"22:33","showId":229388,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"98393","prStr":"48901","preferential":0,"tm":"20:30","sell":true},{"end":"23:23","showId":229389,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"三号激光厅","sellPrStr":"97394","prStr":"96909","preferential":0,"tm":"21:20","sell":true},{"end":"00:03","showId":229390,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"28490.999","prStr":"751415220670","preferential":0,"tm":"22:00","sell":true},{"end":"00:53","showId":229391,"tp":"3D","lang":"国语","dt":"2017-08-16","embed":0,"showDate":"2017-08-16","grayDesc":"","seatStatus":1,"isMorrow":false,"th":"二号激光厅","sellPrStr":"20358","prStr":"79906","preferential":0,"tm":"22:50","sell":true}]},"cssLink":"//p0.meituan.net/movie/9ca4e6e45293ba96292f00ed964a24a22696.css"}}'

  data = JSON.parse(data)

  return data;
}
function place() {
  var data = '{"user":"","sections":[{"seatRows":[{"columns":15,"rowId":"1","rowNum":1,"seats":[{"columnNum":0,"rowId":"1","rowNum":1,"columnId":"","seatNo":"","type":"E"},{"columnNum":1,"rowId":"1","rowNum":1,"columnId":"14","seatNo":"0300000500200101","type":"N"},{"columnNum":2,"rowId":"1","rowNum":1,"columnId":"13","seatNo":"0300000500300101","type":"N"},{"columnNum":3,"rowId":"1","rowNum":1,"columnId":"12","seatNo":"0300000500400101","type":"N"},{"columnNum":4,"rowId":"1","rowNum":1,"columnId":"11","seatNo":"0300000500500101","type":"N"},{"columnNum":5,"rowId":"1","rowNum":1,"columnId":"10","seatNo":"0300000500600101","type":"N"},{"columnNum":6,"rowId":"1","rowNum":1,"columnId":"9","seatNo":"0300000500700101","type":"N"},{"columnNum":7,"rowId":"1","rowNum":1,"columnId":"8","seatNo":"0300000500800101","type":"N"},{"columnNum":8,"rowId":"1","rowNum":1,"columnId":"7","seatNo":"0300000500900101","type":"N"},{"columnNum":9,"rowId":"1","rowNum":1,"columnId":"6","seatNo":"0300000501000101","type":"N"},{"columnNum":10,"rowId":"1","rowNum":1,"columnId":"5","seatNo":"0300000501100101","type":"N"},{"columnNum":11,"rowId":"1","rowNum":1,"columnId":"4","seatNo":"0300000501200101","type":"N"},{"columnNum":12,"rowId":"1","rowNum":1,"columnId":"3","seatNo":"0300000501300101","type":"N"},{"columnNum":13,"rowId":"1","rowNum":1,"columnId":"2","seatNo":"0300000501400101","type":"N"},{"columnNum":14,"rowId":"1","rowNum":1,"columnId":"1","seatNo":"0300000501500101","type":"N"}]},{"columns":15,"rowId":"2","rowNum":2,"seats":[{"columnNum":0,"rowId":"2","rowNum":2,"columnId":"","seatNo":"","type":"E"},{"columnNum":1,"rowId":"2","rowNum":2,"columnId":"14","seatNo":"0300000500200201","type":"N"},{"columnNum":2,"rowId":"2","rowNum":2,"columnId":"13","seatNo":"0300000500300201","type":"N"},{"columnNum":3,"rowId":"2","rowNum":2,"columnId":"12","seatNo":"0300000500400201","type":"N"},{"columnNum":4,"rowId":"2","rowNum":2,"columnId":"11","seatNo":"0300000500500201","type":"N"},{"columnNum":5,"rowId":"2","rowNum":2,"columnId":"10","seatNo":"0300000500600201","type":"N"},{"columnNum":6,"rowId":"2","rowNum":2,"columnId":"9","seatNo":"0300000500700201","type":"N"},{"columnNum":7,"rowId":"2","rowNum":2,"columnId":"8","seatNo":"0300000500800201","type":"N"},{"columnNum":8,"rowId":"2","rowNum":2,"columnId":"7","seatNo":"0300000500900201","type":"N"},{"columnNum":9,"rowId":"2","rowNum":2,"columnId":"6","seatNo":"0300000501000201","type":"N"},{"columnNum":10,"rowId":"2","rowNum":2,"columnId":"5","seatNo":"0300000501100201","type":"N"},{"columnNum":11,"rowId":"2","rowNum":2,"columnId":"4","seatNo":"0300000501200201","type":"N"},{"columnNum":12,"rowId":"2","rowNum":2,"columnId":"3","seatNo":"0300000501300201","type":"N"},{"columnNum":13,"rowId":"2","rowNum":2,"columnId":"2","seatNo":"0300000501400201","type":"N"},{"columnNum":14,"rowId":"2","rowNum":2,"columnId":"1","seatNo":"0300000501500201","type":"N"}]},{"columns":15,"rowId":"3","rowNum":3,"seats":[{"columnNum":0,"rowId":"3","rowNum":3,"columnId":"","seatNo":"","type":"E"},{"columnNum":1,"rowId":"3","rowNum":3,"columnId":"14","seatNo":"0300000500200301","type":"N"},{"columnNum":2,"rowId":"3","rowNum":3,"columnId":"13","seatNo":"0300000500300301","type":"N"},{"columnNum":3,"rowId":"3","rowNum":3,"columnId":"12","seatNo":"0300000500400301","type":"N"},{"columnNum":4,"rowId":"3","rowNum":3,"columnId":"11","seatNo":"0300000500500301","type":"N"},{"columnNum":5,"rowId":"3","rowNum":3,"columnId":"10","seatNo":"0300000500600301","type":"N"},{"columnNum":6,"rowId":"3","rowNum":3,"columnId":"9","seatNo":"0300000500700301","type":"N"},{"columnNum":7,"rowId":"3","rowNum":3,"columnId":"8","seatNo":"0300000500800301","type":"N"},{"columnNum":8,"rowId":"3","rowNum":3,"columnId":"7","seatNo":"0300000500900301","type":"N"},{"columnNum":9,"rowId":"3","rowNum":3,"columnId":"6","seatNo":"0300000501000301","type":"N"},{"columnNum":10,"rowId":"3","rowNum":3,"columnId":"5","seatNo":"0300000501100301","type":"N"},{"columnNum":11,"rowId":"3","rowNum":3,"columnId":"4","seatNo":"0300000501200301","type":"N"},{"columnNum":12,"rowId":"3","rowNum":3,"columnId":"3","seatNo":"0300000501300301","type":"N"},{"columnNum":13,"rowId":"3","rowNum":3,"columnId":"2","seatNo":"0300000501400301","type":"N"},{"columnNum":14,"rowId":"3","rowNum":3,"columnId":"1","seatNo":"0300000501500301","type":"N"}]},{"columns":15,"rowId":"4","rowNum":4,"seats":[{"columnNum":0,"rowId":"4","rowNum":4,"columnId":"","seatNo":"","type":"E"},{"columnNum":1,"rowId":"4","rowNum":4,"columnId":"14","seatNo":"0300000500200401","type":"N"},{"columnNum":2,"rowId":"4","rowNum":4,"columnId":"13","seatNo":"0300000500300401","type":"N"},{"columnNum":3,"rowId":"4","rowNum":4,"columnId":"12","seatNo":"0300000500400401","type":"N"},{"columnNum":4,"rowId":"4","rowNum":4,"columnId":"11","seatNo":"0300000500500401","type":"N"},{"columnNum":5,"rowId":"4","rowNum":4,"columnId":"10","seatNo":"0300000500600401","type":"N"},{"columnNum":6,"rowId":"4","rowNum":4,"columnId":"9","seatNo":"0300000500700401","type":"LK"},{"columnNum":7,"rowId":"4","rowNum":4,"columnId":"8","seatNo":"0300000500800401","type":"LK"},{"columnNum":8,"rowId":"4","rowNum":4,"columnId":"7","seatNo":"0300000500900401","type":"N"},{"columnNum":9,"rowId":"4","rowNum":4,"columnId":"6","seatNo":"0300000501000401","type":"N"},{"columnNum":10,"rowId":"4","rowNum":4,"columnId":"5","seatNo":"0300000501100401","type":"N"},{"columnNum":11,"rowId":"4","rowNum":4,"columnId":"4","seatNo":"0300000501200401","type":"N"},{"columnNum":12,"rowId":"4","rowNum":4,"columnId":"3","seatNo":"0300000501300401","type":"N"},{"columnNum":13,"rowId":"4","rowNum":4,"columnId":"2","seatNo":"0300000501400401","type":"N"},{"columnNum":14,"rowId":"4","rowNum":4,"columnId":"1","seatNo":"0300000501500401","type":"N"}]},{"columns":15,"rowId":"5","rowNum":5,"seats":[{"columnNum":0,"rowId":"5","rowNum":5,"columnId":"11","seatNo":"0300000500100501","type":"N"},{"columnNum":1,"rowId":"5","rowNum":5,"columnId":"10","seatNo":"0300000500200501","type":"N"},{"columnNum":2,"rowId":"5","rowNum":5,"columnId":"9","seatNo":"0300000500300501","type":"N"},{"columnNum":3,"rowId":"5","rowNum":5,"columnId":"8","seatNo":"0300000500400501","type":"N"},{"columnNum":4,"rowId":"5","rowNum":5,"columnId":"7","seatNo":"0300000500500501","type":"N"},{"columnNum":5,"rowId":"5","rowNum":5,"columnId":"6","seatNo":"0300000500600501","type":"N"},{"columnNum":6,"rowId":"5","rowNum":5,"columnId":"5","seatNo":"0300000500700501","type":"N"},{"columnNum":7,"rowId":"5","rowNum":5,"columnId":"4","seatNo":"0300000500800501","type":"N"},{"columnNum":8,"rowId":"5","rowNum":5,"columnId":"3","seatNo":"0300000500900501","type":"N"},{"columnNum":9,"rowId":"5","rowNum":5,"columnId":"2","seatNo":"0300000501000501","type":"N"},{"columnNum":10,"rowId":"5","rowNum":5,"columnId":"1","seatNo":"0300000501100501","type":"N"},{"columnNum":11,"rowId":"5","rowNum":5,"columnId":"","seatNo":"","type":"E"},{"columnNum":12,"rowId":"5","rowNum":5,"columnId":"","seatNo":"","type":"E"},{"columnNum":13,"rowId":"5","rowNum":5,"columnId":"","seatNo":"","type":"E"},{"columnNum":14,"rowId":"5","rowNum":5,"columnId":"","seatNo":"","type":"E"}]},{"columns":15,"rowId":"6","rowNum":6,"seats":[{"columnNum":0,"rowId":"6","rowNum":6,"columnId":"11","seatNo":"0300000500100601","type":"N"},{"columnNum":1,"rowId":"6","rowNum":6,"columnId":"10","seatNo":"0300000500200601","type":"N"},{"columnNum":2,"rowId":"6","rowNum":6,"columnId":"9","seatNo":"0300000500300601","type":"N"},{"columnNum":3,"rowId":"6","rowNum":6,"columnId":"8","seatNo":"0300000500400601","type":"N"},{"columnNum":4,"rowId":"6","rowNum":6,"columnId":"7","seatNo":"0300000500500601","type":"N"},{"columnNum":5,"rowId":"6","rowNum":6,"columnId":"6","seatNo":"0300000500600601","type":"N"},{"columnNum":6,"rowId":"6","rowNum":6,"columnId":"5","seatNo":"0300000500700601","type":"N"},{"columnNum":7,"rowId":"6","rowNum":6,"columnId":"4","seatNo":"0300000500800601","type":"N"},{"columnNum":8,"rowId":"6","rowNum":6,"columnId":"3","seatNo":"0300000500900601","type":"N"},{"columnNum":9,"rowId":"6","rowNum":6,"columnId":"2","seatNo":"0300000501000601","type":"N"},{"columnNum":10,"rowId":"6","rowNum":6,"columnId":"1","seatNo":"0300000501100601","type":"N"},{"columnNum":11,"rowId":"6","rowNum":6,"columnId":"","seatNo":"","type":"E"},{"columnNum":12,"rowId":"6","rowNum":6,"columnId":"","seatNo":"","type":"E"},{"columnNum":13,"rowId":"6","rowNum":6,"columnId":"","seatNo":"","type":"E"},{"columnNum":14,"rowId":"6","rowNum":6,"columnId":"","seatNo":"","type":"E"}]},{"columns":15,"rowId":"7","rowNum":7,"seats":[{"columnNum":0,"rowId":"7","rowNum":7,"columnId":"","seatNo":"","type":"E"},{"columnNum":1,"rowId":"7","rowNum":7,"columnId":"10","seatNo":"0300000500200701","type":"N"},{"columnNum":2,"rowId":"7","rowNum":7,"columnId":"9","seatNo":"0300000500300701","type":"N"},{"columnNum":3,"rowId":"7","rowNum":7,"columnId":"8","seatNo":"0300000500400701","type":"N"},{"columnNum":4,"rowId":"7","rowNum":7,"columnId":"7","seatNo":"0300000500500701","type":"N"},{"columnNum":5,"rowId":"7","rowNum":7,"columnId":"6","seatNo":"0300000500600701","type":"N"},{"columnNum":6,"rowId":"7","rowNum":7,"columnId":"5","seatNo":"0300000500700701","type":"N"},{"columnNum":7,"rowId":"7","rowNum":7,"columnId":"4","seatNo":"0300000500800701","type":"N"},{"columnNum":8,"rowId":"7","rowNum":7,"columnId":"3","seatNo":"0300000500900701","type":"N"},{"columnNum":9,"rowId":"7","rowNum":7,"columnId":"2","seatNo":"0300000501000701","type":"N"},{"columnNum":10,"rowId":"7","rowNum":7,"columnId":"1","seatNo":"0300000501100701","type":"N"},{"columnNum":11,"rowId":"7","rowNum":7,"columnId":"","seatNo":"","type":"E"},{"columnNum":12,"rowId":"7","rowNum":7,"columnId":"","seatNo":"","type":"E"},{"columnNum":13,"rowId":"7","rowNum":7,"columnId":"","seatNo":"","type":"E"},{"columnNum":14,"rowId":"7","rowNum":7,"columnId":"","seatNo":"","type":"E"}]},{"columns":15,"rowId":"8","rowNum":8,"seats":[{"columnNum":0,"rowId":"8","rowNum":8,"columnId":"","seatNo":"","type":"E"},{"columnNum":1,"rowId":"8","rowNum":8,"columnId":"","seatNo":"","type":"E"},{"columnNum":2,"rowId":"8","rowNum":8,"columnId":"","seatNo":"","type":"E"},{"columnNum":3,"rowId":"8","rowNum":8,"columnId":"8","seatNo":"0300000500400801","type":"N"},{"columnNum":4,"rowId":"8","rowNum":8,"columnId":"7","seatNo":"0300000500500801","type":"N"},{"columnNum":5,"rowId":"8","rowNum":8,"columnId":"","seatNo":"","type":"E"},{"columnNum":6,"rowId":"8","rowNum":8,"columnId":"","seatNo":"","type":"E"},{"columnNum":7,"rowId":"8","rowNum":8,"columnId":"6","seatNo":"0300000500800801","type":"N"},{"columnNum":8,"rowId":"8","rowNum":8,"columnId":"5","seatNo":"0300000500900801","type":"N"},{"columnNum":9,"rowId":"8","rowNum":8,"columnId":"4","seatNo":"0300000501000801","type":"N"},{"columnNum":10,"rowId":"8","rowNum":8,"columnId":"3","seatNo":"0300000501100801","type":"N"},{"columnNum":11,"rowId":"8","rowNum":8,"columnId":"2","seatNo":"0300000501200801","type":"N"},{"columnNum":12,"rowId":"8","rowNum":8,"columnId":"1","seatNo":"0300000501300801","type":"N"},{"columnNum":13,"rowId":"8","rowNum":8,"columnId":"","seatNo":"","type":"E"},{"columnNum":14,"rowId":"8","rowNum":8,"columnId":"","seatNo":"","type":"E"}]}],"rows":8,"sectionId":"0244011271000005","sectionName":"0244011271000005","columns":15}],"showInfo":{"buyNumLimit":4,"cinemaName":"塘厦星光国际影城","hallName":"5号厅","hallId":"0000000000000005","movieName":"战狼2","showTime":"今天 8月18日19:25","tp":"3D","lang":"国语","cinemaId":23759,"seqNo":"201708180342176","movieId":344264,"desc":"","showId":342176,"price":33.0,"showDate":"2017-08-18"}}'
  data = JSON.parse(data)
  return data;
}
</script>
<style scoped>
/* 头部 */

#seats>header {
  width: 100%;
  background-color: #e54847;
}

#seats>header>a>i {
  position: absolute;
  top: 2.5rem;
  font-size: 2rem;
  color: #fff;
  transform: rotate(180deg);
  margin-right: 88%;
}

#seats>header>p {
  color: #fff;
}



/* 导航 */

#seats .seatsCentent .buy_step>ul {
  display: flex;
  justify-content: space-around;
}

#seats .seatsCentent .buy_step>ul>li {
  display: inline-block;
  flex-grow: 1;
  text-align: center;
  height: 2rem;
  line-height: 2rem;
  background-color: #ddd;
  font-size: 1rem;
}

#seats .seatsCentent .buy_step>ul>.actived {
  background-color: #F79400;
  color: #fff !important;
  border: 1px solid #F79400;
}



/* 提交订单 */

#seats .seatsCentent .movie_title {
  padding: .5rem 1rem;
  border-bottom: 1px solid #aaa;
  display: inline-table;
  width: 100%;
  background-color: #fff;
}

#seats .seatsCentent .movie_title div {
  float: left
}

#seats .seatsCentent .movie_title div strong {
  font-size: 1.5rem;
}

#seats .seatsCentent .movie_title div p {
  font-size: 1rem;
  margin-bottom: 0;
}

#seats .seatsCentent .movie_title .buy {
  float: right;
  background-color: #aaa;
  color: #fff;
  padding: .7rem 1.7rem;
  border-radius: 4px;
  margin-top: 4px;
  font-size: 1rem;
}

.buy[disable=true] {
  background-color: #aaa;
}



/* 选择/座位 */

#seats .seatsCentent .movie_tip {
  background-color: #fff;
  border-bottom: 1px solid #aaa;
  font-size: 1rem
}


#seats .seatsCentent .movie_tip ul {
  display: flex;
  justify-content: space-around;
  height: 2rem;
  padding: .5rem 0;
  box-sizing: content-box;
}

#seats .seatsCentent .movie_tip ul li {
  display: inline-block;
  flex-grow: 1;
  text-align: center;
  height: 2rem;
  line-height: 2.2rem;
}

#seats .seatsCentent .movie_tip .seat {
  width: 1.5rem;
  height: 1.5rem;
  margin: .25rem .2rem 0 0;
  vertical-align: top;
  display: inline-block;
  background-size: cover;
}

.seat {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: cover;
  vertical-align: top;
  margin: .25rem .2rem 0 0;
}

.active {
  background-image: url("");
}

.selected {
  background-image: url("")
}

.disable {
  background-image: url("")
}

.love {
  background-image: url("")
}

#seats .seatsCentent .selectedSeat span {
  background-color: #fff;
  border: 1px solid #aaa;
  padding: .3rem .5rem;
}

#seats .seatsCentent .selectedSeat .money {
  color: red;
  font-size: 1.8rem;
  float: right;
}



/* 位置 */

#seats .seatsCentent .main>span {
  display: block;
  margin: 0 auto;
  width: 16rem;
  text-align: center;
  color: #ffe4a5;
  background-color: #e54847;
  border-radius: 0 0 1rem 1rem;
  font-size: 1.2rem;
}


#seats .seatsCentent .main .scroller {
  float: left;
  background-color: #aaa;
  color: #fff;
  border-radius: 5px;
  /* margin: 0 1rem 0 0; */
}

#seats .seatsCentent .main .scroller p {
  margin: 0 0 0 5px;
}

#seats .seatsCentent .main .scroller ul {
  padding: 1.5rem 0;
}

#seats .seatsCentent .main .scroller ul li {
  padding: .5rem;
  font-size: 1.4rem;
}

#seats .seatsCentent .main .main_seats .screen_tip {
  background-color: #d1d1d1;
  width: 5rem;
  font-size: 1.2rem;
  text-align: center;
  margin: 0 auto;
}

#seats .seatsCentent .main .main_seats ul>li>ul {
  display: inline-flex;
  padding: .5rem;
}

#seats .seatsCentent .main .main_seats ul>li>ul>li {
  font-size: 1.4rem;
}
</style>
